import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'amfe-flexible'

import {
  NavBar, Form, Field, Button, Loading, Tabbar,
  TabbarItem, Icon, Tab, Tabs, Cell, List, PullRefresh, ActionSheet
  , Popup, Row, Col, Badge, Search, Image as VanImage, Divider, Tag,
  CellGroup, Image, Dialog, DatetimePicker
} from 'vant'
Vue.use(DatetimePicker)
Vue.use(Dialog)
Vue.use(Image)
Vue.use(Tag)
Vue.use(CellGroup)
Vue.use(Divider)
Vue.use(VanImage)
Vue.use(Search)
Vue.use(Row)
Vue.use(Col)
Vue.use(Badge)
Vue.use(Popup)
Vue.use(ActionSheet)
Vue.use(PullRefresh)
Vue.use(List)
Vue.use(Icon)
Vue.use(Form)
Vue.use(Field)
Vue.use(NavBar)
Vue.use(Button)
Vue.use(Loading)
Vue.use(Tabbar)
Vue.use(TabbarItem)
Vue.use(Tab)
Vue.use(Tabs)
Vue.use(Cell)
Vue.config.productionTip = false

// 封装中间件插件函数
const directiveObj = {
  install (Vue) {
    Vue.directive('fofo', {
      // 指令所在van-search组件
      // 组件根标签是div, input在内部
      // 以上都是原生的js对象
      // inserted (el) {
      //   el.focus()
      // }
      // 知识点：原生DOM.nodeName拿到标签的名字（注意：大写的字符串）
      inserted (el) {
        if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT') {
          el.focus()
        } else {
          const theInput = el.querySelector('input')
          const theTextArea = el.querySelector('textarea')
          // 判断：不一定能获取的到，需要加判断，有值了，再执行
          if (theInput)theInput.focus()
          if (theTextArea)theTextArea.focus()
        }
      }
    })
  }
}
// 执行目标对象里的install方法并传入Vue类
Vue.use(directiveObj)
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
